<template>
  <div class="detail">
    <!-- 导航栏 -->
    <div class="nav">
      <hmttnav title="文章详情" path="/index"></hmttnav>
    </div>
    <!-- 标题 -->
    <h1>{{ articleInfo.title }}</h1>
    <!-- 个人信息 -->
    <div class="info">
      <div class="img">
        <img :src="articleInfo.aut_photo" alt="" />
      </div>
      <div class="user">
        <div class="name">{{ articleInfo.aut_name }}</div>
        <div class="time">{{ articleInfo.pubdate | hmfilter }}</div>
      </div>
      <div class="attontion">
        <button v-if="articleInfo.is_followed" @click="discollect">
          已关注
        </button>
        <button v-else @click="collect">+关注</button>
      </div>
    </div>
    <!-- 内容 -->
    <div class="content" v-html="articleInfo.content"></div>
    <!-- 点赞 -->
    <div class="action">
      <van-button
        round
        text="点赞"
        icon="like"
        :class="{ like: articleInfo.attitude == 1 }"
        v-if="articleInfo.attitude == 1"
        @click="disStar"
      ></van-button>
      <van-button
        round
        text="点赞"
        icon="like"
        v-if="articleInfo.attitude !== 1"
        @click="star"
      ></van-button>

      <van-button
        round
        text="不喜欢"
        icon="delete"
        :class="{ unlike: articleInfo.attitude === 0 }"
        v-if="articleInfo.attitude == 0"
        @click="dis_unlike"
      ></van-button>
      <van-button
        round
        text="不喜欢"
        icon="delete"
        v-if="articleInfo.attitude !== 0"
        @click="_unlike"
      ></van-button>
    </div>
    <!-- 评论留言 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad()"
    >
      <div
        class="usercomment"
        v-for="(item, index) in commentList"
        :key="index"
      >
        <div class="left">
          <img :src="item.aut_photo" alt="" />
        </div>
        <div class="right">
          <div class="user">
            <div class="username">{{ item.aut_name }}</div>
            <van-icon
              name="like"
              :class="{ comStar: item.like_count != 0 }"
              @click="comStar(item)"
            >
              {{ item.like_count }}</van-icon
            >
          </div>
          <div class="commentarea">{{ item.content }}</div>
          <div class="reply">
            <span class="time">{{ item.pubdate | hmfilter }}</span>
            <van-button
              class="btn"
              round
              text=""
              color="#ccc"
              size="small"
              @click="reply(item)"
              >回复 {{ item.reply_count }}
            </van-button>
          </div>
        </div>
      </div>
    </van-list>

    <!-- 评论框 -->
    <div class="commtensBox">
      <div class="comment">
        <van-search
          class="search"
          left-icon=""
          shape="round"
          v-model="value"
          placeholder="写评论"
        />
        <van-button
          class="mybtn"
          type="primary"
          size="small"
          @click="addComment"
          >发送</van-button
        >
      </div>
    </div>

    <!-- 评论弹出层 -->
    <div class="pinglunBox">
      <van-popup
        class="pop"
        v-model="show"
        position="bottom"
        :style="{ height: '60%' }"
      >
        <div class="head">当前评论</div>
        <!-- 评论区 -->
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad()"
        >
          <div
            class="usercomment"
            v-for="(item, index) in replyList"
            :key="index"
            style="padding-right:40px"
          >
            <div class="left">
              <img :src="item.aut_photo" alt="" />
            </div>
            <div class="right">
              <div class="user">
                <div class="username">{{ item.aut_name }}</div>
                <van-icon
                  name="like"
                  :class="{ comStar: item.like_count != 0 }"
                  @click="comStar(item)"
                >
                  {{ item.like_count }}</van-icon
                >
              </div>
              <div class="commentarea">{{ item.content }}</div>
              <span class="time" style="font-size:14px">{{
                item.pubdate | hmfilter
              }}</span>
            </div>
          </div>
        </van-list>
        <!-- 输入框 -->
        <div class="commtensBox">
          <div class="comment">
            <van-search
              class="search"
              left-icon=""
              shape="round"
              v-model="revalue"
              placeholder="写评论"
            />
            <van-button
              type="primary"
              class="mybtn"
              size="small"
              @click="reComment"
              >发送</van-button
            >
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import {
  articleDetailApi,
  CollectApi,
  disCollectApi,
  starApi,
  disStarApi,
  disLikeApi,
  _disLikeApi,
  getCommentApi,
  addCommentApi,
  comStarApi
  // uncomStarApi
} from '../../Api/detail'
// import { localGet } from '../../utils/mylocal'
export default {
  data () {
    return {
      articleInfo: {}, // 文章列表
      value: '', // 输入框内容
      revalue: '',
      artID: 0, // 文章ID
      commentId: '', // 评论ID
      commentList: [], // 文章评论列表
      replyList: [], // 回复评论评论列表
      show: false, // 控制弹出框,
      isType: false,
      typeId: 0,
      loading: false,
      finished: false,
      total: 0
    }
  },
  created () {
    // console.log(this.$route.params.artid)
    this.getArticle(this.$route.params.artid)
  },
  methods: {
    // 详情数据
    async getArticle (id) {
      const res = await articleDetailApi(id)
      this.articleInfo = res.data.data
      this.artID = res.data.data.art_id // 文章ID
      console.log(this.artID)
      // this.getComment()
    },
    // 关注
    async collect () {
      this.articleInfo.is_followed = true
      await CollectApi({
        target: this.articleInfo.aut_id
      })
    },
    // 取消关注
    async discollect () {
      this.articleInfo.is_followed = false
      await disCollectApi(this.articleInfo.aut_id)
    },
    // 点赞
    async star () {
      this.articleInfo.attitude = 1
      await starApi({
        target: this.artID
      })
    },
    // 取消点赞
    async disStar () {
      this.articleInfo.attitude = -1
      await disStarApi(this.artID)
    },
    // 对文章不喜欢
    async _unlike () {
      this.articleInfo.attitude = 0
      await disLikeApi({
        target: this.artID
      })
    },
    // 取消对文章不喜欢
    async dis_unlike () {
      this.articleInfo.attitude = -1
      await _disLikeApi(this.artID)
    },
    // 获取评论
    async onLoad () {
      // 发送请求到服务器得到评论数据
      const res = await getCommentApi({
        type: 'a',
        source: this.$route.params.artid
      })
      console.log(res)
      this.commentList.push(...res.data.data.results)
      this.total = res.data.data.total_count
      // 将加载状态改为false
      this.loading = false
      // 判断所有数据源是否加载完毕
      if (this.commentList.length >= this.total) {
        this.finished = true
      }
    },

    async getComment () {
      console.log(this.artID)
      const res = await getCommentApi({
        type: 'a',
        source: this.artID
      })
      this.commentList = res.data.data.results
      console.log(res)
    },
    // 获取回复评论
    async reply (item) {
      this.show = true
      const res = await getCommentApi({
        type: 'c',
        source: item.com_id.toNumber() // 评论ID
      })
      this.replyList = res.data.data.results
      console.log(res)
      // 保存评论id
      this.commentId = item.com_id.toNumber()
    },
    // 添加评论
    async addComment () {
      await addCommentApi({
        target: this.artID,
        content: this.value
      })
      this.getComment() // 刷新评论
      // this.onLoad() //刷新评论
      this.value = '' // 清空
    },
    // 添加回复评论
    async reComment () {
      // console.log(item)
      const res = await addCommentApi({
        target: this.commentId, // 评论id
        content: this.revalue, // 文章内容
        art_id: this.artID // 文章id
      })
      console.log(res)
      // 刷新评论
      const res1 = await getCommentApi({
        type: 'c',
        source: this.commentId // 评论ID
      })
      this.replyList = res1.data.data.results
      // 清空
      this.revalue = ''
    },
    // 评论点赞
    async comStar (item) {
      if (item.like_count === 0) {
        item.like_count++
      } else {
        item.like_count--
      }
      //  this.typeId=id.com_id
      this.isType = true
      const res = await comStarApi({ target: item.com_id.toNumber() })
      //  this.getComment()
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
.comStar {
  color: red;
}
.detail {
  padding: 30px 0 0 0;
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  /deep/ .van-nav-bar {
    background-color: #3e9df8;
    h4 {
      font-weight: normal;
      color: #fff;
    }
  }
  h1 {
    text-align: center;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    font-weight: 400;
    padding: 0 20px;
    margin: 32px 0;
    font-size: 20px;
    margin-top: 30px;
  }
  .info {
    height: 77px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    border-bottom: 1px solid #eee;
    .img {
      width: 50px;
      height: 50px;
      border-radius: 25px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .user {
      flex: 1;
      margin-left: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .name {
        font-size: 12px;
      }
      .time {
        font-size: 12px;
      }
    }
    .attontion {
      button {
        width: 74px;
        height: 44px;
        font-size: 14px;
        border: none;
        color: #fff;
        background-color: #3e9df8;
      }
    }
  }
  .content {
    // width: 100%;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
    color: #323233;
    font-size: 14px;
    line-height: 0.64rem;
    word-wrap: break-word;
    word-break: break-all;
    /deep/ pre {
      white-space: pre-wrap;
    }
    /deep/ img {
      width: 100%;
    }
  }
  .action {
    display: flex;
    padding: 30px;
    justify-content: space-around;
    .like {
      color: red;
      border: 1px solid red;
    }
    .unlike {
      color: red;
      border: 1px solid red;
    }
  }
  // 评论内容
  .usercomment {
    display: flex;
    padding: 10px 15px;
    padding-bottom: 1px solid #ccc;
    .left {
      width: 60px;
      padding-right: 10px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .right {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-around;
      .user {
        display: flex;
        font-size: 14px;
        .username {
          color: rgb(166, 206, 236);
          flex: 1;
        }
      }
      .commentarea {
        font-size: 14px;
        padding: 15px 0;
      }
      .reply {
        font-size: 14px;
        display: flex;
        align-items: center;
        .time {
          margin-right: 15px;
        }
      }
    }
  }
  // 评论框
  .commtensBox {
    // position: relative;
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    .comment {
      display: flex;
      // width: 100%;
      height: 50px;
      // padding-right: 10px;
      align-items: center;
      background-color: #ffffff;
      .search {
        width: 77%;
        height: 30px;
      }
      /deep/ .mybtn {
        width: 75px;
      }
    }
  }

  // 弹出层
  .pinglunBox {
    .pop {
      .head {
        padding: 20px 0 10px 20px;
      }
      .usercomment {
        display: flex;
        padding: 10px 15px;
        padding-bottom: 1px solid #ccc;
        .left {
          width: 60px;
          padding-right: 10px;
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }
        .right {
          display: flex;
          flex: 1;
          flex-direction: column;
          justify-content: space-around;
          .user {
            display: flex;
            font-size: 14px;
            .username {
              color: rgb(166, 206, 236);
              flex: 1;
            }
          }
          .commentarea {
            font-size: 14px;
            padding: 15px 0;
          }
          .reply {
            font-size: 14px;
            display: flex;
            align-items: center;
            .time {
              margin-right: 15px;
            }
          }
        }
      }
      // 弹出评论框
      .comment {
        display: flex;
        position: fixed;
        width: 100%;
        // bottom: 5px;
        left: 0;
        padding-right: 10px;
        align-items: center;
        .search {
          width: 77%;
          height: 30px;
        }
        /deep/ .mybtn {
          width: 75px;
        }
      }
    }
  }
}
</style>
